<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=4569a58af9782838ffdb42488d75e6e7&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
     <% include link %>
    <link rel="stylesheet" type="text/css" href="/css/popo.css">
</head>
<body>
  <% include head %>
   <div id="popo_write">
     <div id="popo_write_bg"></div>
     <div id="popo_star"></div>
     <div id="popo_star2"></div>
     <div id="popo_write_left">
      <p class="popo_close" id="popo_close">x</p>
        <div class="auto_container">
          <p class="popo_username"><%-user.name%></p>
          <textarea  class="form-control font_box" rows="7" id="popo_text"></textarea>
          <p style="color:#fff;"><img src="/images/ip_more.png" id="ip_more"><span id="ip_more_span"></span></p>
          <a id="popo_save" href="#" class="button button-glow button-big button-border button-rounded button-primary popo_save">发布</a>
        </div>
     </div>
   </div>
  <div id="ufo_button"></div> 
  <div id="popo_unlog" >
    <p class="popo_close" id="unlog_close">x</p>
    <p class="unlog_w">亲你尚未登陆，无法使用此功能</p>
    <a href="../log/login" class="button button-glow button-big button-border button-rounded button-primary unlog_log">前往登陆</a>
  </div>
  <div id="popo_det">
      <p class="popo_close" id="popo_write_close">x</p>
      <div style="height:70px">
        <a href="#" id="popo_write_a">
          <img  src="/images/defaultHead.png" class="img-circle" id="popo_write_logo">
        </a>
        <p id="popo_write_name"></p>
      </div>
      <p id="popo_write_content"></p>
      <p id="popo_write_time"></p>
      <span id="popo_write_time_log" class="glyphicon glyphicon-time"></span>
  </div>
	<div id="container"></div>
<script type="text/javascript">

  var myself_ip ;
  var content = "";
  var markers = []; 

	var cluster,marker,geocoder,geolocation,map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle:"blue_night",
        zoom:15
  });

  initpopo();

  function initpopo(){
    var popoJson = '<%- JSON.stringify(popos) %>'
    popoJson = JSON.parse(popoJson);
    $.each(popoJson,function(id,obj){
        marker = new AMap.Marker({
        map:map,
        position:obj.ip,
        icon:"/images/popo_logo.png"
        });
        markers.push(marker);
        marker.on('click',function(e){

            $.ajax({
              url:"/map/"+obj.userid,
              type:'get',
              success:function(data){
                $("#popo_write_content").html(obj.content);
                $("#popo_write_name").html(data.write.name);
                // alert("content:"+obj.content +"userid:"+obj.userid);
                // alert(data.write.name);
                $('#popo_write_a').attr("href",'/userhome/'+data.write._id);
                $('#popo_write_logo').attr("src",data.write.headImgUrl);
                var time = obj.upTime;
                time = parseInt(time);
                time = new Date(time).format("yyyy-MM-dd hh:ss");
                $('#popo_write_time').html(time);
                $("#popo_det").show();
              }
            });
        });
    });
  }


      
  function regeocoder(myposition) {  
      

      geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
      }); 


      if (myposition!=null) {
          geocoder.getAddress(myposition, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    geocoder_CallBack(result);
                }
          }); 
      } 
  }

  function geocoder_CallBack(data) {  
      var address = data.regeocode.formattedAddress; 
      $('#ip_more_span').html(address);
  }  

  map.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,          
        maximumAge: 0,                 
        showButton: true,        
        buttonPosition: 'RB',        
        showCircle: false,       
        panToLocation: true,     
        zoomToAccuracy:true     
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
  });

    function onComplete(data) {
        myself_ip = [data.position.getLng(),data.position.getLat()];
        // regeocoder(data.position);
        regeocoder(myself_ip);
    }

    function onError(data) {
        alert("定位失败");
    }

    addCluster();

    function addCluster() {
        if (cluster) {
            cluster.setMap(null);
        }
        
        map.plugin(["AMap.MarkerClusterer"], function() {
            cluster = new AMap.MarkerClusterer(map, markers);
        });
 
    }

    $("#ufo_button").on("click",function(){
      if (user) {
         $("#popo_write").show();
      }  else {
         $("#popo_unlog").show();
      }
    });

    $("#unlog_close").on("click",function(){
        $("#popo_unlog").hide();
    });

    $("#popo_write_bg").on("click",function(){
        $("#popo_write").hide();
        $("#popo_text").val("");
    });

    $("#popo_close").on("click",function(){
        $("#popo_write").hide();
        $("#popo_text").val("");
    });

    $('#popo_save').on("click",function(){
      if (user && myself_ip && myself_ip!=null) {
          content = $("#popo_text").val();
          content = content.replace(/<[^>]+>/g,"","");
          $.ajax({
            url:'/map/',
            type:'post',
            data:{
              mypopo:{
              'content':content,
              'userid':user.userid,
              'ip':myself_ip,
              'upTime':new Date().getTime()
              }
            },
            success: function(date){
               window.location.reload();  
            }
        });
        $("#popo_write").hide();
        $("#popo_text").val("");
      }
    });

    $("#popo_write_close").on('click',function(){
        $("#popo_det").hide();
    })


</script>
</body>
</html>
